<template>
	<view class="mark">
		<view class="mark-item">
			<view class="bar-img"></view>
			<!-- 黑色进度条 -->
			<view class="inner" :style="{width: score + '%', 'border-radius': score !== 100 ? '24px 0 0 24px' : '24px'}">
				<!-- 小蜜蜂 -->
				<image class="bee" src="/static/image/report/bee.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 5个星 -->
		<view class="mark-stars">
			<view class="mark-star" :class="'start'+i" v-for="(item,i) in 5" :key="i">
				<image class="s" v-if="score > i*20 && score < (i+1)*20" src="/static/image/report/s2.png" mode="widthFix"></image>
				<image class="s" v-else-if="score >= (i+1)*20" src="/static/image/report/s1.png" mode="widthFix"></image>
				<image class="s" v-else src="/static/image/report/s3.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name: 'scoreMark',
		props: {
			score: {
				type: Number // 满分100分
			}
		},
		data() {
			return {
				
			}
		},
		
	}
</script>

<style lang="less">
	.mark{
		margin-top: 60px;
	}
	.mark-item{
		width: 100%;
		height: 10px;
		position: relative;
		.bar-img{
			background-image: url(/static/image/report/progress.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1000;
		}
	}
	.inner{
		height: 100%;
		background-color: #000;
		position: relative;
		.bee{
			position: absolute;
			top: -40px;
			right: -16px;
			width: 34px;
		}
	}
	image{
		width: 20px;
	}
	.s{
		width: 20px;
		height: 20px;
	}
	.mark-stars{
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 10px;
	}
	@media screen and (orientation: landscape) and (min-width: 600px){
		.mark-item{
			height: 20px;
		}
	}
</style>